import {ViewStyle, StyleSheet, TextStyle, ImageStyle} from 'react-native'
import {translateSize, themeColors, definedColors} from 'styles'

interface WelcomeStyle {
  welcomeContainer: ViewStyle
  welcomeTitle: TextStyle
  logo: ImageStyle
  welcomeArrow: ImageStyle
  powerBy: TextStyle
}

interface SignInStyle {
  logoContainer: ViewStyle
  logo: ImageStyle
  setting: ViewStyle
  welcomeContainer: ViewStyle
  welcomeTitle: TextStyle
  welcomeArrow: ImageStyle
  eye: ImageStyle
}

interface AppHomeStyle {
  containerRow: ViewStyle
  settingContainer: ViewStyle
  collect: ViewStyle
  building: ViewStyle
  deposit: ViewStyle
  instead: ViewStyle
  advance: ViewStyle
  more: ViewStyle
  setting: ViewStyle
  gridItem: ViewStyle
  imgContainer: ViewStyle
  payLeft: ImageStyle
  payCenter: ImageStyle
  collectIcon: ImageStyle
  buildingIcon: ImageStyle
  depositIcon: ImageStyle
  insteadIcon: ImageStyle
  advanceIcon: ImageStyle
  moreIcon: ImageStyle
  gridIcon: ImageStyle
  gridTitle: TextStyle
  authContainer: ViewStyle
  projectText: TextStyle
  projectTitle: TextStyle
  selectContainer: ViewStyle
  selectItem: ViewStyle
  selectTitle: TextStyle
  drawerContainer: ViewStyle
  drawerItem: ViewStyle
  drawerTitle: TextStyle
  drawerActive: TextStyle
}

interface ChooseRecognitionStyle {}

interface PaySuccessStyle {
  iconView: ViewStyle
  icon: ImageStyle
  title: TextStyle
  moneyView: ViewStyle
  money: TextStyle
  unit: TextStyle
  buttonContainer: ViewStyle
  btnPosPrint: ViewStyle
  btnReceipt: ViewStyle
}

interface ChangeCardStyle {
  container: ViewStyle
  listContainer: ViewStyle
  itemContainer: ViewStyle
  cardNameContainer: ViewStyle
  cardIcon: ImageStyle
  cardName: TextStyle
  cardCheck: ViewStyle
  checkImage: ImageStyle
  cardId: TextStyle
  comfirmBtn: ViewStyle
  btnText: TextStyle
}

interface SettingStyle {
  container: ViewStyle
  rightArrow: ViewStyle
  rightContent: ViewStyle
  btn: ViewStyle
  btnTitle: TextStyle
}

interface ChangeProjectStyle {
  container: ViewStyle
  listContainer: ViewStyle
  itemContainer: ViewStyle
  projectName: TextStyle
  checkImage: ImageStyle
  comfirmBtn: ViewStyle
  btnText: TextStyle
}

interface ChangeStyle {
  container: ViewStyle
  listContainer: ViewStyle
  itemContainer: ViewStyle
  rowContainer: ViewStyle
  rowMargin: ViewStyle
  nameContainer: ViewStyle
  icon: ImageStyle
  name: TextStyle
  leftCheck: ViewStyle
  rightCheck: ViewStyle
  checkImage: ImageStyle
  remark: TextStyle
  comfirmBtn: ViewStyle
  btnText: TextStyle
}

const welcomeStyle = StyleSheet.create<WelcomeStyle>({
  welcomeContainer: {
    width: '100%',
    height: '100%',
    backgroundColor: '#262161',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'relative',
  },
  logo: {
    width: translateSize(320),
    height: translateSize(100),
  },
  welcomeArrow: {
    width: translateSize(140),
    height: translateSize(48),
    marginLeft: translateSize(180),
    marginTop: translateSize(24),
  },
  powerBy: {
    fontSize: translateSize(24),
    color: '#fff',
    position: 'absolute',
    bottom: translateSize(80),
  },
})

const signInStyle = StyleSheet.create<SignInStyle>({
  logoContainer: {
    width: '100%',
    height: translateSize(405),
    backgroundColor: '#262161',
    borderBottomLeftRadius: translateSize(20),
    borderBottomRightRadius: translateSize(20),
    position: 'relative',
  },
  redCircleLeft: {
    width: translateSize(360),
    height: translateSize(360),
    position: 'absolute',
    left: -translateSize(180),
    bottom: -translateSize(180),
  },
  redCircleRight: {
    width: translateSize(540),
    height: translateSize(540),
    position: 'absolute',
    right: -translateSize(270),
    top: -translateSize(270),
  },
  logo: {
    width: translateSize(320),
    height: translateSize(100),
    marginTop: translateSize(130),
    marginLeft: translateSize(220),
  },
  welcomeContainer: {
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-start',
    marginTop: translateSize(20),
  },
  welcomeTitle: {
    fontSize: translateSize(24),
    marginTop: translateSize(20),
    color: '#fff',
  },
  welcomeArrow: {
    width: translateSize(140),
    height: translateSize(48),
    marginLeft: translateSize(60),
    marginTop: translateSize(24),
  },
  setting: {
    width: translateSize(80),
    position: 'absolute',
    right: 0,
    top: 0,
    paddingHorizontal: translateSize(32),
    paddingTop: translateSize(10),
    backgroundColor: 'transparent',
  },
  eye: {
    width: translateSize(37),
    height: translateSize(30),
  },
})

const appHomeStyle = StyleSheet.create<AppHomeStyle>({
  containerRow: {
    width: '100%',
    flexDirection: 'row',
    flexWrap: 'nowrap',
    alignItems: 'center',
  },
  settingContainer: {
    width: '100%',
    height: translateSize(150),
    backgroundColor: themeColors.pageBg,
    paddingHorizontal: translateSize(20),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    position: 'relative',
  },
  projectText: {
    fontSize: translateSize(40),
    fontWeight: '500',
    color: definedColors.white,
    marginRight: translateSize(10),
  },
  selectContainer: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    top: translateSize(150),
    paddingHorizontal: translateSize(30),
    left: 0,
    backgroundColor: '#212447',
  },
  selectItem: {
    paddingVertical: translateSize(18),
    borderBottomWidth: 1,
    borderColor: themeColors.divider,
  },
  selectTitle: {
    color: '#fff',
    fontSize: translateSize(32),
  },
  setting: {
    position: 'absolute',
    right: 0,
    top: 0,
    paddingHorizontal: translateSize(32),
    paddingTop: translateSize(20),
  },
  gridItem: {
    width: translateSize(375),
    height: translateSize(375),
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  collect: {
    backgroundColor: '#6062F6',
  },
  building: {
    backgroundColor: '#5FBBAD',
  },
  deposit: {
    backgroundColor: '#B27BEB',
  },
  instead: {
    backgroundColor: '#ECA658',
  },
  advance: {
    backgroundColor: '#D65F83',
  },
  more: {
    backgroundColor: '#525A7A',
  },
  imgContainer: {
    width: translateSize(90),
    height: translateSize(90),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative',
  },
  payLeft: {
    width: translateSize(27),
    height: translateSize(27),
    position: 'absolute',
    left: translateSize(-14),
    top: translateSize(0),
  },
  payCenter: {
    width: translateSize(27),
    height: translateSize(27),
    position: 'absolute',
    left: translateSize(34),
    top: translateSize(-20),
  },
  collectIcon: {
    width: translateSize(71),
    height: translateSize(72),
  },
  buildingIcon: {
    width: translateSize(72),
    height: translateSize(66),
  },
  depositIcon: {
    width: translateSize(72),
    height: translateSize(64),
  },
  insteadIcon: {
    width: translateSize(76),
    height: translateSize(40),
  },
  advanceIcon: {
    width: translateSize(64),
    height: translateSize(67),
  },
  moreIcon: {
    width: translateSize(62),
    height: translateSize(72),
  },
  gridIcon: {
    width: translateSize(55),
  },
  gridTitle: {
    fontSize: translateSize(28),
    marginTop: translateSize(24),
    color: '#fff',
  },
  authContainer: {
    position: 'absolute',
    left: '60%',
    width: '40%',
    paddingRight: translateSize(20),
    flexDirection: 'column',
    top: translateSize(178),
  },
  projectTitle: {
    fontSize: translateSize(40),
    color: definedColors.white,
  },
  drawerContainer: {
    width: '100%',
    height: '100%',
    backgroundColor: '#212447',
    paddingHorizontal: translateSize(32),
    position: 'relative',
  },
  drawerItem: {
    paddingVertical: translateSize(18),
    borderBottomWidth: 1,
    borderColor: themeColors.divider,
  },
  drawerTitle: {
    color: '#fff',
    fontSize: translateSize(32),
  },
  drawerActive: {
    color: 'red',
  },
})

const chooseRecognitionStyle = StyleSheet.create<ChooseRecognitionStyle>({})

const paySuccessStyle = StyleSheet.create<PaySuccessStyle>({
  iconView: {
    justifyContent: 'center',
    paddingTop: translateSize(60),
    paddingBottom: translateSize(35),
  },
  icon: {
    width: translateSize(44),
    height: translateSize(44),
  },
  title: {
    fontSize: translateSize(36),
    color: themeColors.title,
    fontWeight: 'bold',
    marginLeft: translateSize(10),
  },
  moneyView: {
    justifyContent: 'center',
    paddingBottom: translateSize(54),
    marginBottom: translateSize(32),
  },
  money: {
    fontSize: translateSize(60),
    color: themeColors.title,
    fontWeight: 'bold',
  },
  unit: {
    fontSize: translateSize(40),
    color: themeColors.title,
    fontWeight: 'bold',
    marginLeft: translateSize(5),
  },
  buttonContainer: {
    flexDirection: 'column',
    paddingHorizontal: translateSize(32),
    paddingTop: translateSize(36),
  },
  btnPosPrint: {
    width: translateSize(200),
    paddingVertical: translateSize(5),
  },
  btnReceipt: {
    flex: 1,
    height: translateSize(86),
    marginHorizontal: translateSize(30),
    marginTop: translateSize(40),
    marginBottom: translateSize(50),
  },
})

const changeCardStyle = StyleSheet.create<ChangeCardStyle>({
  container: {
    paddingHorizontal: translateSize(30),
    flex: 1,
    backgroundColor: themeColors.pageBg,
  },
  listContainer: {
    paddingVertical: translateSize(30),
    backgroundColor: themeColors.pageBg,
  },
  itemContainer: {
    width: '100%',
    flexDirection: 'column',
    marginBottom: translateSize(30),
    borderRadius: translateSize(10),
    paddingHorizontal: translateSize(24),
    paddingTop: translateSize(24),
    paddingBottom: translateSize(24),
    backgroundColor: definedColors.white,
  },
  cardNameContainer: {
    flexDirection: 'row',
    paddingLeft: translateSize(20),
    alignItems: 'center',
  },
  cardIcon: {
    width: translateSize(46),
    height: translateSize(46),
  },
  cardName: {
    paddingLeft: translateSize(14),
    fontSize: translateSize(32),
    color: themeColors.title,
    width: '80%',
  },
  cardCheck: {
    position: 'absolute',
    right: 0,
    paddingHorizontal: translateSize(10),
  },
  checkImage: {
    width: translateSize(50),
  },
  cardId: {
    paddingLeft: translateSize(60),
    fontSize: translateSize(28),
    color: definedColors.gray92,
  },
  comfirmBtn: {
    marginBottom: translateSize(320),
  },
  btnText: {
    color: definedColors.white,
    fontSize: translateSize(34),
  },
})

const settingStyle = StyleSheet.create<SettingStyle>({
  container: {
    paddingTop: translateSize(50),
  },
  rightContent: {
    display: 'flex',
    flexDirection: 'row',
  },
  rightArrow: {
    width: '100%',
    // height: translateSize(77),
    backgroundColor: 'transparent',
    paddingRight: translateSize(108),
    // paddingLeft: translateSize(48),
  },
  btn: {
    flex: -1,
    width: translateSize(130),
  },
  btnTitle: {
    color: themeColors.primary,
    fontSize: translateSize(22),
  },
})

const changeProjectStyle = StyleSheet.create<ChangeProjectStyle>({
  container: {
    paddingHorizontal: translateSize(30),
    height: '100%',
    backgroundColor: themeColors.pageBg,
  },
  listContainer: {
    paddingVertical: translateSize(32),
    backgroundColor: themeColors.pageBg,
  },
  itemContainer: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: translateSize(30),
    borderRadius: translateSize(10),
    height: translateSize(100),
    justifyContent: 'space-between',
    paddingHorizontal: translateSize(24),
    backgroundColor: definedColors.white,
  },
  projectName: {
    fontSize: translateSize(32),
    color: themeColors.title,
    width: '50%',
  },
  checkImage: {
    width: translateSize(50),
  },
  comfirmBtn: {
    marginBottom: translateSize(320),
  },
  btnText: {
    color: definedColors.white,
    fontSize: translateSize(34),
  },
})

const changeStyle = StyleSheet.create<ChangeStyle>({
  container: {
    paddingHorizontal: translateSize(30),
    flex: 1,
    backgroundColor: themeColors.pageBg,
  },
  listContainer: {
    paddingVertical: translateSize(30),
    backgroundColor: themeColors.pageBg,
  },
  itemContainer: {
    width: '100%',
    flexDirection: 'column',
    marginBottom: translateSize(30),
    borderRadius: translateSize(10),
    paddingHorizontal: translateSize(24),
    paddingTop: translateSize(24),
    paddingBottom: translateSize(30),
    backgroundColor: definedColors.white,
  },
  rowContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  nameContainer: {
    flexDirection: 'row',
    paddingLeft: translateSize(20),
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '90%',
  },
  icon: {
    width: translateSize(46),
    height: translateSize(46),
  },
  name: {
    paddingLeft: translateSize(14),
    fontSize: translateSize(37),
    color: themeColors.title,
  },
  rightCheck: {
    position: 'absolute',
    right: 0,
    paddingHorizontal: translateSize(10),
  },
  leftCheck: {
    position: 'absolute',
    left: 0,
    paddingHorizontal: translateSize(10),
  },
  checkImage: {
    width: translateSize(50),
  },
  remark: {
    paddingHorizontal: translateSize(10),
    fontSize: translateSize(28),
    color: definedColors.gray92,
  },
  rowMargin: {
    marginTop: translateSize(20),
  },
  comfirmBtn: {
    marginBottom: translateSize(20),
  },
  btnText: {
    color: definedColors.white,
    fontSize: translateSize(34),
  },
})
export {
  welcomeStyle,
  signInStyle,
  appHomeStyle,
  paySuccessStyle,
  changeCardStyle,
  settingStyle,
  changeProjectStyle,
  changeStyle,
}
